<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleCancel" center width="40%">
    <el-form ref="editFormRef" :model="editForm" :rules="rules" size="small">
      <el-form-item label="角色名称" :label-width="labelWidth" prop="roleName">
        <el-input v-model="editForm.roleName" placeholder="请输入角色名称" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="是否启用" :label-width="labelWidth" prop="isEnable">
        <el-radio-group v-model="editForm.isEnable">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="角色备注" :label-width="labelWidth" prop="remark">
        <el-input type="textarea" v-model="editForm.remark" placeholder="请输入角色备注"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel" size="small">取 消</el-button>
      <el-button type="primary" @click="hanldeSave('editFormRef')" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addRole, editRole } from '../js/auth'
import pick from 'lodash.pick'
export default {
  name: 'RoleModal',
  data () {
    return {
      title: '角色新增',
      isAdd: false,
      dialogVisible: false, // 编辑弹窗
      labelWidth: '100px',
      editForm: {
        roleName: '',
        isEnable: '',
        remark: ''
      },
      model: {},
      rules: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        isEnable: [{ required: true, message: '请选择是否启用', trigger: 'blur' }],
        remark: [{ required: false, message: '请输入角色备注', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  methods: {
    // 新增
    add () {
      this.edit({})
    },
    // 编辑
    edit (record) {
      this.dialogVisible = true
      this.model = Object.assign({}, record)
      if (record.roleNo) {
        this.$nextTick(() => {
          this.editForm = pick(this.model, 'roleName', 'isEnable', 'remark')
        })
      }
    },
    handleCancel () {
      this.dialogVisible = false
      this.$refs.editFormRef.resetFields()
    },
    hanldeSave (editFormRef) {
      this.$refs[editFormRef].validate(async valid => {
        if (valid) {
          let res, msg
          const values = {
            ...this.editForm
          }
          if (!this.model.roleNo) {
            res = await addRole(Object.assign({}, values))
            msg = '保存成功！'
          } else {
            res = await editRole(Object.assign({}, values, { roleNo: this.model.roleNo }))
            msg = '修改成功！'
          }
          if (res.code === 0) {
            this.$message.success(msg)
          } else {
            this.$message.warning(res.msg)
          }
          this.$emit('ok')
          this.handleCancel()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
.el-dialog {
  .el-input,
  .el-select {
    width: 100%;
  }
}
/deep/ .el-dialog__body {
  padding-bottom: 0;
}
</style>
